/*
文字点击可编辑
https://gitee.com/mhxt/click-edit
 */

(function (win) {
    win.clickEdit = function (className, options) {
        this.config = this.extend({}, this.config, options);
        this.bindClick(className);
    };

    clickEdit.prototype.config = {
        backgroundColor: '',
        callback: null,
    };

    clickEdit.prototype.extend = function () {
        var length = arguments.length;
        var target = arguments[0] || {};

        if (typeof target != "object" && typeof target != "function") {
            target = {};
        }

        if (length == 1) {
            target = this;
            i--;
        }

        for (var i = 1; i < length; i++) {
            var source = arguments[i];
            for (var key in source) {
                if (Object.prototype.hasOwnProperty.call(source, key)) {
                    target[key] = source[key];
                }
            }
        }
        return target;
    };

    clickEdit.prototype.bindClick = function (className) {
        var that = this;
        var elements = document.getElementsByClassName(className);

        for (var i = 0; i < elements.length; i++) {
            elements[i].onclick = function () {
                that.editShow(this);
            }
        }
    };

    clickEdit.prototype.editShow = function (element) {
        var self = this
            , options = self.config;

        this.removeEvent();

        if (this.input) {
            this.input.remove();
        }

        var input = document.createElement("textarea");
        input.style.position = "absolute";
        input.style.zIndex = "100";
        input.style.outline = "0";
        input.style.borderWidth = "0";
        input.style.padding = "0";
        input.style.resize = "none";
        input.style.backgroundColor = options.backgroundColor;
        input.style.fontSize = function () {
            var ret;
            if (element.style.fontSize) {
                ret = element.style.fontSize;
            } else {
                if (window.getComputedStyle)
                    ret = window.getComputedStyle(element).fontSize;
                else
                    ret = element.currentStyle.fontSize;
            }
            return ret;
        }();
        input.style.fontFamily = function () {
            var ret;
            if (element.style.fontFamily) {
                ret = element.style.fontFamily;
            } else {
                if (window.getComputedStyle)
                    ret = window.getComputedStyle(element).fontFamily;
                else
                    ret = element.currentStyle.fontFamily;
            }
            return ret;
        }();
        input.style.lineHeight = function () {
            var ret;
            if (element.style.lineHeight) {
                ret = element.style.lineHeight;
            } else {
                if (window.getComputedStyle)
                    ret = window.getComputedStyle(element).lineHeight;
                else
                    ret = element.currentStyle.lineHeight;
            }
            return ret;
        }();
        input.style.width = element.offsetWidth + "px";
        input.style.height = element.offsetHeight + "px";
        input.style.top = element.offsetTop + "px";
        input.style.left = element.offsetLeft + "px";
        input.value = element.innerHTML.replace(/\s/g, "");

        if (element.parentElement) {
            element.parentElement.appendChild(input);
        }

        input.select();

        this.click = function (event) {
            self.editHide(event);
        };

        setTimeout(function () {
            if (window.addEventListener) {
                document.addEventListener("click", this.click);
                input.onkeydown = function (e) {
                    if (e.keyCode === 13) this.editChange(input, element);
                }.bind(this)
            } else {
                document.attachEvent("onclick", this.click);
            }
        }.bind(this));

        this.input = input;
        this.element = element;

        return this;
    };

    clickEdit.prototype.editChange = function (input, element) {
        var options = this.config;
        var value = '';

        if (!input.value || input.value == "") {
            value = element.innerText;
        } else {
            value = input.value;
        }

        element.innerText = value;

        input.remove();
        element.onchange && element.onchange.apply(this, arguments);
        this.removeEvent();

        if (typeof options.callback == 'function') {
            options.callback(value, element);
        }
    };

    clickEdit.prototype.editHide = function (event) {
        if (event.target === this.input) return;
        this.editChange(this.input, this.element);
        this.removeEvent();
        this.input.remove();
    };

    clickEdit.prototype.removeEvent = function () {
        if (window.addEventListener) {
            document.removeEventListener("click", this.click);
        } else {
            document.detachEvent("onclick", this.click);
        }
    };
})(window);